<template>
  <div style="background-color: white">
    <div class="probox">
      <router-link to="/index/product"
        ><el-page-header content="添加商品"> </el-page-header
      ></router-link>
    </div>
    <el-divider></el-divider>
    <div>
      <el-form
        status-icon
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <el-input

            
            v-model="ruleForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input
        
            v-model="ruleForm.price"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="inventory">
          <el-input
          
            v-model="ruleForm.inventory"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="ruleForm.categoryId" placeholder="请选择" >
            <el-option
              v-for="it in options"
              :key="it._id"
              :label="it.name"
              :value="it._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品规格" prop="specAttr">
          <el-input
            v-model="ruleForm.specAttr"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="imgs">
          <el-input
v-model="ruleForm.imgs"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品详情" prop="detail">
          <el-input
            type="text"
            v-model="ruleForm.detail"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addProduct(ruleForm)"
            >提交</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        categoryId: "", //分类id
        pCategoryId: 0, //父分类id
        name: "",
        desc: "",
        price: "",
        detail: "",
        imgs: [],
        inventory: "",
        specAttr: {}
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        desc: [
          { required: true, message: "请输入商品描述", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        inventory: [
          { required: true, message: "请输入商品库存", trigger: "blur" },
        ],
        naspecAttrme: [
          { required: true, message: "请输入商品规格", trigger: "blur" },
        ],

      },
    };
  },
  methods: {
    ...mapActions(["addProducts"]),
    addProduct(ruleForm) {
      console.log(ruleForm);
      this.addProducts(ruleForm)
    },
  },
  computed: {
    options(){
      return this.$store.state.products.categorys.list;
    }
  },
};
</script>
<style >
.tag-group {
  margin: 8px 0 8px 20px;
}
.tag-group .el-tag {
  height: 20px;
  line-height: 20px;
  margin-right: 15px;
}
</style>